<template>
  <div class="home">
    <div class="nav">
      <div
        :class="['nav_item', index == itemClickIndex ? 'item_active' : '']"
        v-for="(item, index) in routerPath"
        :key="index"
        @click="itemChange(index, item)"
      >
        {{ index + 1 + " " + item.title }}
      </div>
    </div>
    <div class="main">
      <router-view></router-view>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      itemClickIndex: 0,
    };
  },
  mounted() {
    this.itemChange(0, this.routerPath[0]);
  },
  computed: {
    routerPath() {
      return this.$router.options.routes[0].children;
    },
  },
  methods: {
    itemChange(val, item) {
      this.itemClickIndex = val;
      this.$router.push(item.path);
    },
  },
};
</script>
<style>
.home {
  display: flex;
  height: 100vh;
  /* // background-color: aqua; */
}
.main {
  flex: 1;
  /* // background-color: rgb(223, 154, 64); */
  border-left: 1px solid rgb(83, 161, 212);
}
.nav {
  display: flex;
  width: 250px;
  flex-direction: column;
  /* // background-color: rgb(42, 54, 221); */
}
.nav_item {
  height: 40px;
  line-height: 40px;
  padding: 0 15px;
  border-bottom: 1px solid rgb(83, 161, 212);
  overflow: hidden;
  cursor: pointer;
}
.item_active {
  background-color: rgb(72, 137, 235);
  font-weight: 700;
  color: #ffffff;
}
</style>
